<template>
	<div class="mobile">
		<div class="mHeader">
			<div class="mhBack">
				<i class="mhBackIco"></i>
			</div>
			<h3 class="mhTitle">{{basicInfo.name ? getName(basicInfo.name) : '小程序名称'}}</h3>
			<div class="mhShare"></div>
		</div>
		<div class="mMain">
			<div class="mBanner">
				<img v-if="bannerList && bannerList.length > 0 && bannerList[0].previewUrl" :src="bannerList[0].previewUrl" />
				<img v-else src="./images/banner.png">
			</div>

			<div class="mMainList" v-if="goodsList && goodsList.length > 0">
				<div v-for="(item, index) in goodsList" @click="goDetail('goodsdetail', item)">
					<div class="mMainList_img">
						<img :src="item.image.imgUrl" >
					</div>
					<div class="mMainList_describe">
						<div class="mMainList_title">
							{{item.name}}
						</div>
						<div class="mMainList_cue">
							<span v-if="item.tag" v-for="(tag, tagIndex) in item.tag.split(',')">
								{{tag | tagMapping}}
							</span>
						</div>
						<div class="mMainList_price">¥{{item.lowPrice === item.highPrice ? item.highPrice : (item.lowPrice + '-' + item.highPrice)}}</div>
						<div class="mMainList_month" v-if="item.lowPayment">月供：{{item.lowPayment}}元起</div>
					</div>
				</div>
			</div>

			<div v-else class="noPro">
				<span>暂时木有商品哦</span>
			</div>
			
		</div>
		<div class="mFooter">
			<div class="mtabItem mtabAct">
				<i class="mfTco mproIco"></i>
				<p>产品</p>
			</div>
			<div class="mtabItem" @click="goDetail('stores')">
				<i class="mfTco mstoreIco"></i>
				<p>门店</p>
			</div>
			<div class="mtabItem" @click="preview">
				<i class="mfTco maskIco"></i>
				<p>询价</p>
			</div>
		</div>
	</div>
</template>

<script type="javascript/ecmascript6">
import fetch from '@/fetch'
import {mapState, mapActions} from 'vuex'

export default{
  name: 'mgoodscomponent',
  data () {
  	return {
  	  goodsList: [],
  	  bannerList: []
  	}
  },
  computed: {
  	...mapState([
  	  'basicInfo'
  	])
  },
  methods: {
  	...mapActions([
  	  'currentGoodIdStatus'
  	]),
  	getName (name) {
	  return name.length > 10 ? (name.substr(0, 10) + '...') : name
	},
  	preview () {
  	  this.$noty.warning('预览模式下不支持此功能!')
  	},
  	goDetail (name, item) {
  	  if (item) {
  	  	this.currentGoodIdStatus(item.goodId)
  	  }
  	  this.$emit('updateView', name)
  	},
  	getBannerList () {
  	  fetch.send('/merchant/xcx/getBanners').then(res => {
  	  	if (res.respCode === '000000') {
  	  	  this.bannerList = res.result.data
  	  	} else {
  	  	  this.$noty.error(res.respDesc ? res.respDesc : '获取banner失败')
  	  	}
  	  })
  	},
  	getGoodsList () {
      fetch.send('/merchant/getGoodsList').then(res => {
        if (res.respCode === '000000') {
          this.goodsList = res.result.goodsList
        } else {
          this.$noty.error(res.respDesc ? res.respDesc : '获取商品列表失败')
        }
      })
    }
  },
  filters: {
  	tagMapping (tag) {
  	  let text = ''
  	  switch (tag) {
  	  	case '1': 
  	  	  text = '可分期'
  	  	  break
  	  	case '2': 
  	  	  text = '0首付'
  	  	  break
  	  	case '3': 
  	  	  text = '免息分期'
  	  	  break
  	  	case '4': 
  	  	  text = '携带银行卡+身份证'
  	  	  break
  	  }
  	  return text
  	}
  },
  created () {
  	this.getGoodsList()
  	this.getBannerList()
  }
}
</script>
<style type="text/css" scoped>
	.mobile{
		border: none;
		height: 100%;
		width: 100%;
		overflow: hidden;
		line-height: 1;
		background: #fff;
		z-index: 331;
	}
	.mHeader{
		display: flex;
		height: 42px;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: 999;
		background: #fff;
		border-bottom: 1px solid #dedede;
	}
	.mhBack{
		width: 12px;
		padding: 0 15px;
		display: flex;
		align-items: center;
		cursor: pointer;
	}
	.mhBackIco{
		display: block;
		vertical-align: middle;
		width: 12px;
		height: 12px;
		border-left: 1px solid #757575;
		border-bottom: 1px solid #757575;
		transform: rotate(45deg);
	}
	.mhTitle{
		flex: 1;
		color: #000;
		font-size: 15px;
		line-height: 42px;
		text-align: center;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	.mhShare{
		display: block;
		width: 12px;
		padding: 0 15px;
		display: flex;
		align-items: center;
	}
	.mMain{
		width: 100%;
		padding: 44px 0 56px;
		background: #fff;
		overflow: scroll;
	}
	.mBanner{
		position: absolute;
		left: 0;
		width: 100%;
	}
	.mBanner img{
		width: 100%;
	}
	.noPro{
		width: 100%;
		margin-top: 168px;
		padding-top: 100px;
		background: url('images/noPro.png') no-repeat center center;
		background-size: 128px 80px;
	}
	.noPro>span{
		font-size: 18px;
		line-height: 42px;
		display: inline-block;
		width: 100%;
		text-align: center;
		color: #666;
		padding-top: 40px;
	}
	.mMainList{
		padding-top: 168px;
		height: 413px;
		overflow: scroll;
	}
	.mMainList>div{
		display: flex;
		margin-left: 15px;
		padding: 12px 0;
		border-bottom: 1px solid #ddd;
	}
	.mMainList>div img{
		width: 80px;
		height: 80px;
	}
	.mMainList_describe{
		width: 260px;
		text-align: left;
		margin-left: 5px;
		color: #333;
		font-size: 14px;
		line-height: 18px;
	}
	.mMainList_title{
		overflow: hidden;
	}
	.mMainList_cue span{
		display: inline-block;
		border: 0.5px solid #FFA230;
		border-radius: 2px;
		font-size: 12px;
		line-height: 14px;
		color: #FFA230;
		padding: 1px 5px;
		margin: 3px 5px 0 0;
	}
	.mMainList_price{
		color: #f54d4f;
		font-size: 16px;
		line-height: 22px;
		margin-top: 7px;
	}
	.mMainList_month{
		color: #8f8f8f;
		font-size: 12px;
	}
	.mFooter{
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 999;
		display: flex;
		height: 48px;
		background: #fff;
		box-shadow: 0 -1px 5px 0px rgba(51,51,51,.15);
	}
	.mtabItem{
		flex: 1;
		padding-top: 6px;
	}
	.mfTco{
		width: 16px;
		height: 16px;
		display: block;
		margin: 0 auto;
		background-size: cover;
	}
	.mproIco{
		background: url('images/prod0.png') no-repeat 100% 100%;
	}
	.mstoreIco{
		background: url('images/store0.png') no-repeat 100% 100%;
	}
	.maskIco{
		background: url('images/ask0.png') no-repeat 100% 100%;
	}
	.mtabItem p{
		margin-top: 5px;
		text-align: center;
		font-size: 14px;
		color: #696969;
	}
	.mtabAct p{
		color: #F55557;
	}
	.mtabAct .mproIco{
		background: url('images/prod01.png') no-repeat 100% 100%;
	}
	.mtabAct .mstoreIco{
		background: url('images/store01.png') no-repeat 100% 100%;
	}
	.mtabAct .maskIco{
		background: url('images/ask01.png') no-repeat 100% 100%;
	}
</style>